<template>
    <div class="btn-content">
        <el-row type="flex" justify="space-between">
            <el-col :span="12" style="margin-bottom:10px;">
                <el-button-group>
                    <el-button v-for="(item, index) in buttonList.slice(0, 3)" :key="index" :type="item.colorType" :icon="item.icon" @click="handleButtonClick(item)">{{ item.buttonName }}</el-button>
                </el-button-group>
                <el-popover
                    v-show="hasOtherButton"
                    placement="right"
                    width="100"
                    trigger="click">
                    <el-button v-for="(item, index) in otherButton" style="margin-left:5px;margin-bottom:5px;" :key="index" :type="item.colorType" :icon="item.icon" @click="handleButtonClick(item)">{{ item.buttonName }}</el-button>
                    <el-button slot="reference">更多</el-button>
                </el-popover>
            </el-col>
            <el-col :span="12" style="margin-bottom:20px;">
                <el-row type="flex" justify="space-between" :gutter="20">
                    <el-col :span="18">
                        <el-button-group style="float: right;">
                            <el-button type="primary"><i class="iconfont icon-refresh" tip="刷新"/></el-button>
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="click">
                                <el-checkbox-group class="fun-select-content" v-model="checkedColumn" @change="handleCheckedColumnChange">
                                    <el-checkbox v-model="item.isshow" @click="toggleChecked(item)" v-for="item in columnDate" :label="item" :key="item.formColumnColumnId">{{ item.formColumnLable }}</el-checkbox>
                                </el-checkbox-group>
                                <div class="bottom">
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                </div>
                                <div class="bottom-btn">
                                    <el-button type="primary" @click="inverse">反选</el-button>
                                    <el-button type="primary">确定</el-button>
                                </div>
                                <el-button slot="reference" type="primary" style="border-radius: 0"><i class="iconfont icon-biaoge" tip="卡片"/></el-button>
                            </el-popover>
                            <el-button type="primary"><i class="iconfont icon-tubiao" tip="图表"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-refresh"/></el-button>
                            <el-button type="primary"><i class="iconfont icon-download"/></el-button>
                            <!-- <el-button type="primary"><i class="iconfont icon-upload"/></el-button> -->
                        </el-button-group>
                    </el-col>
                    <el-col :span="6" v-show="hasCommonFilter">
                        <el-input
                            v-model="commonFilter"
                            :placeholder="commonPlaceholder"
                            suffix-icon="el-icon-search"/>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        buttonList: Array,
        buttonValid: Object,
        columnDate: Array,
        commonPlaceholder: '',
        hasCommonFilter: true
    },
    data() {
        return {
            commonFilter: '',
            checkedColumn: [],
            isIndeterminate: true,
            checkAll: false
        }
    },
    computed: {
        hasOtherButton() {
            return this.buttonList.length > 3
        },
        otherButton() {
            return this.buttonList.slice(3)
        }
    },
    watch: {
        commonFilter(val) {
            this.debouncedGetFilter()
        }
    },
    created() {
        this.debouncedGetFilter = this._.debounce(this.emitFilter, 500)
        this.columnDate.forEach(item => {
            if (item.isshow) {
                this.checkedColumn.push(item)
            }
        })
        if (this.checkedColumn.length === this.columnDate.length) {
            this.checkAll = true
            this.isIndeterminate = false
        }
    },
    methods: {
        emitFilter() {
            this.$eventBus.$emit('common-filter', this.commonFilter)
        },
        toggleChecked(item) {
            item.isshow = !item.isshow
        },
        handleCheckAllChange(val) {
            console.log(val)
            this.checkedColumn = val ? this.columnDate : []
            this.isIndeterminate = false
        },
        handleCheckedColumnChange(value) {
            console.log(value)
            this.checkedColumn = []
            value.forEach(item => {
                this.checkedColumn.push(item)
            })
            const checkedCount = value.length
            this.checkAll = checkedCount === this.columnDate.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnDate.length
        },
        inverse() {
            console.log(this.checkedColumn)
            const arr2 = this.checkedColumn.splice(0)
            for (var i = 0; i < this.columnDate.length; i++) {
                var obj = this.columnDate[i]
                var formColumnColumnId = obj.formColumnColumnId
                var isExist = false
                for (var j = 0; j < arr2.length; j++) {
                    var aj = arr2[j]
                    var n = aj.formColumnColumnId
                    if (n === formColumnColumnId) {
                        isExist = true
                        break
                    }
                }
                if (!isExist) {
                    this.checkedColumn.push(obj)
                }
                this.$forceUpdate()
                console.log(this.checkedColumn)
            }
            this.checkedColumn.splice(0, this.checkedColumn.length)
            if (this.checkedColumn.length === this.columnDate.length) {
                this.checkAll = true
                this.isIndeterminate = false
            } else {
                this.checkAll = false
                // this.isIndeterminate = true
            }
        },
        handleButtonClick(item) {
            this.$emit('onRowButtonClick', item)
        }
    }
}
</script>

